<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="国家机构编码" prop="fixmedinsCode">
        <el-input
            v-model="queryParams.fixmedinsCode"
            placeholder="请输入国家机构编码"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="信息系统院内唯一ID" prop="systemId">
        <el-input
            v-model="queryParams.systemId"
            placeholder="请输入信息系统院内唯一ID"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检查唯一标识符" prop="risStudyId">
        <el-input
            v-model="queryParams.risStudyId"
            placeholder="请输入检查唯一标识符"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检查唯一标识符" prop="risStudyId">
        <el-input
          v-model="queryParams.risStudyId"
          placeholder="请输入检查唯一标识符"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上报节点" prop="source"  >
  <el-select
    v-model="queryParams.source"
    placeholder="请选择上报节点"
    clearable
    style="width: 200px"
  >
    <el-option
      v-for="item in api_load_type"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['system:log:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['system:log:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="国家机构编码" align="center" prop="fixmedinsCode" />
      <el-table-column label="信息系统院内唯一ID" align="center" prop="systemId" />
      <el-table-column label="检查唯一标识符" align="center" prop="risStudyId" />
      <el-table-column label="患者申请信息上传" align="center" prop="apiPatientApply" />
      <el-table-column label="患者检查数据上传" align="center" prop="apiPatientCheck" />
      <el-table-column label="患者报告数据上传" align="center" prop="apiPatientReport" />
      <el-table-column label="报告快照PDF上传" align="center" prop="apiReportSnapshot" />
      <el-table-column label="影像序列信息上报" align="center" prop="apiImageSequence" />
      <el-table-column label="影像图像信息上报" align="center" prop="apiImageVideo" />
      <el-table-column label="结算信息上报" align="center" prop="apiSettlement" />
      <el-table-column label="dicom文件是否完整" align="center" prop="apiDicomFile" />
      <el-table-column label="上报节点" align="center" prop="source">
        <template #default="scope">
          <dict-tag :options="api_load_type" :value="scope.row.source" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'danger' : 'success'">
            {{ scope.row.status === 1 ? '异常' : '正常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上报时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:fklog:list']">详细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 优化后的操作日志详细对话框 -->
    <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body class="log-detail-dialog">
      <el-scrollbar max-height="60vh">
        <el-form :model="form" label-width="140px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="国家机构编码：">
                <div class="detail-value">{{ form.fixmedinsCode || '无' }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信息系统院内唯一ID：">
                <div class="detail-value">{{ form.systemId || '无' }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="检查唯一标识符：">
                <div class="detail-value">{{ form.risStudyId || '无' }}</div>
              </el-form-item>
            </el-col>
            
            <!-- 长文本字段 -->
            <el-col :span="24" v-for="field in longTextFields" :key="field.prop">
              <el-form-item :label="field.label + '：'">
                <div class="long-text-field">
                  <el-scrollbar v-if="form[field.prop] && form[field.prop].length > 100" max-height="120px">
                    <pre class="long-text-content">{{ form[field.prop] || '无' }}</pre>
                  </el-scrollbar>
                  <div v-else class="detail-value">{{ form[field.prop] || '无' }}</div>
                </div>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="上报节点：">
                <dict-tag :options="api_load_type" :value="form.source" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态：">
                <el-tag :type="form.status === 1 ? 'danger' : 'success'">
                  {{ form.status === 1 ? '异常' : '正常' }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求时间：">
                <div class="detail-value">{{ parseTime(form.createTime) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="请求参数：">
                <div class="long-text-field">
                  <el-scrollbar v-if="form.operParam && form.operParam.length > 100" max-height="120px">
                    <pre class="long-text-content">{{ form.operParam || '无' }}</pre>
                  </el-scrollbar>
                  <div v-else class="detail-value">{{ form.operParam || '无' }}</div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Log">
  import { listLog, getLog, delLog } from "@/api/system/fklog"

  const { proxy } = getCurrentInstance()
  const { api_load_type } = proxy.useDict("api_load_type")

  const logList = ref([])
  const open = ref(false)
  const loading = ref(true)
  const showSearch = ref(true)
  const ids = ref([])
  const single = ref(true)
  const multiple = ref(true)
  const total = ref(0)
  const title = ref("")

  // 定义长文本字段
  const longTextFields = [
    { label: "患者申请信息上传", prop: "apiPatientApply" },
    { label: "患者检查数据上传", prop: "apiPatientCheck" },
    { label: "患者报告数据上传", prop: "apiPatientReport" },
    { label: "报告快照PDF上传", prop: "apiReportSnapshot" },
    { label: "影像序列信息上报", prop: "apiImageSequence" },
    { label: "结算信息上报", prop: "apiSettlement" },
    { label: "dicom文件是否完整", prop: "apiDicomFile" }
  ]

  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      fixmedinsCode: null,
      systemId: null,
      risStudyId: null,
      apiPatientApply: null,
      apiPatientCheck: null,
      apiPatientReport: null,
      apiReportSnapshot: null,
      apiImageSequence: null,
      apiImageVideo: null,
      apiSettlement: null,
      apiDicomFile: null,
      source: null,
      operParam: null,
      status: null
    },
    rules: {
    }
  })

  const { queryParams, form, rules } = toRefs(data)

  /** 查询报告提示日志列表 */
  function getList() {
    loading.value = true
    listLog(queryParams.value).then(response => {
      logList.value = response.rows
      total.value = response.total
      loading.value = false
    })
  }

  // 取消按钮
  function cancel() {
    open.value = false
    reset()
  }

  /** 详细按钮操作 */
  function handleView(row) {
    open.value = true
    form.value = row
  }

  // 表单重置
  function reset() {
    form.value = {
      id: null,
      fixmedinsCode: null,
      systemId: null,
      risStudyId: null,
      apiPatientApply: null,
      apiPatientCheck: null,
      apiPatientReport: null,
      apiReportSnapshot: null,
      apiImageSequence: null,
      apiImageVideo: null,
      apiSettlement: null,
      apiDicomFile: null,
      source: null,
      operParam: null,
      createTime: null,
      updateTime: null,
      status: null
    }
    proxy.resetForm("logRef")
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef")
    handleQuery()
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id)
    single.value = selection.length != 1
    multiple.value = !selection.length
  }

  /** 新增按钮操作 */
  function handleAdd() {
    reset()
    open.value = true
    title.value = "添加报告提示日志"
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const _ids = row.id || ids.value
    proxy.$modal.confirm('是否确认删除报告提示日志编号为"' + _ids + '"的数据项？').then(function() {
      return delLog(_ids)
    }).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    }).catch(() => {})
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download('system/log/export', {
      ...queryParams.value
    }, `log_${new Date().getTime()}.xlsx`)
  }

  getList()
</script>

<style scoped>
.detail-value {
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  word-break: break-all;
}

.long-text-field {
  border: 1px solid #e6e8eb;
  border-radius: 4px;
  background-color: #f9fafc;
}

.long-text-content {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 8px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
}

.log-detail-dialog :deep(.el-form-item__label) {
  font-weight: bold;
  color: #606266;
}

.log-detail-dialog :deep(.el-scrollbar__view) {
  padding: 5px;
}
</style>